<template>
	<div class="func-piece-call">
		<template v-if="FBItem.inputVars && FBItem.inputVars.length > 0">
			<el-tabs type="border-card">
				<el-tab-pane v-for="item in FBItem.inputVars" :key="item.label" :label="item.label">
					<div class="val-expression">
						<div class="top">
							<span>值表达式</span>
							<el-input v-model="item.value" />
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</template>

		<!-- 触发条件 -->
		<!-- <div class="trigger-cond" style="margin:15px 0">
      <div style="margin-bottom:10px">
        <el-popover
          placement="top-start"
          width="350"
          trigger="hover"
          content="触发条件，如果为空则无触发条件,格式为：${FBID}.${PinID}，如 1.0 为第1个FB的第0个触角，多个用逗号分割"
        >
          <i slot="reference" class="el-icon-info" /> </el-popover
        >触发条件
      </div>
      <el-input :rows="2" v-model="FBItem.TriggerCond" type="textarea" placeholder="请输入触发条件" />
    </div> -->
		<div class="bottom">
			<div style="margin: 15px 0">执行前操作脚本</div>
			<CSCodeEditor style="height: 230px" ref="execFrontCSCodeEditorRef" v-model="FBItem.PreCode" />
		</div>
		<div class="exec-after-oper">
			<div class="top">
				<span>执行后操作脚本（如果需要，可以将输出保存到需要的变量中）</span>
			</div>
			<div class="bottom">
				<CSCodeEditor style="height: 230px" ref="execAfterCSCodeEditorRef" v-model="FBItem.AfterCode" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import CSCodeEditor from '/@/components/Linxyun/customModule/custom/codeEditor/index.vue';
const state = reactive<any>({ valExp: '', FBItem: {} });
const { FBItem } = toRefs(state);
watch(
	() => state.FBItem.PreCode,
	(newVal) => {
		console.log(newVal);
	}
);
defineExpose({
	FBItem,
});
</script>

<style lang="scss" scoped>
.top {
	display: flex;
	align-items: center;

	.el-input {
		flex: 1;
		margin-left: 10px;
	}
	.el-radio {
		margin-left: 40px;
	}
}
.bottom {
	margin-top: 10px;
	margin-bottom: 20px;
}
::deep(.CodeMirror) {
	height: 180px;
}
</style>
